<template>
  <div class="paysuccesscontainer">


    <div class="paysuccess">支付成功,{{ num }}秒跳转至首页</div>






  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: ''
})
</script>
<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { ref, onUpdated } from 'vue'
const router = useRouter()
const num = ref(3)
const timer = setInterval(() => {

  num.value -= 1

}, 1000)


onUpdated(() => {
  if (num.value === 0) {
    clearInterval(timer)
    router.push('/home')
  }
})
</script>

<style lang="less" scoped>
.paysuccesscontainer {
  width: 100%;
  height: 100%;
  // margin: auto;
  position: relative;

  .paysuccess {
    width: 300px;
    height: 100px;
    background-color: aqua;
    text-align: center;
    line-height: 100px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50px;
    left: 35px;
  }
}
</style>
